<template>
  <div class="cantainer box">
      <!-- 搜索头部组件 -->
    <headerSearch :selectObj="selectObject"  :isShowAdd="menuFlag" :goSearchFc="searckClick" :addFun="addClass"></headerSearch>
    
    <article>
      <el-table
        highlight-current-row
        stripe
        :data="tableData"
        style="width: 100%"
        :height="tableHeight"
        border
      >
        <el-table-column prop="scheduleName" label="班次" show-overflow-tooltip></el-table-column>
        <el-table-column prop="startdayName" label="起始时间" show-overflow-tooltip></el-table-column>
        <el-table-column prop="starttime" label="起始时分秒" show-overflow-tooltip></el-table-column>
        <el-table-column prop="enddayName" label="起止时间" show-overflow-tooltip></el-table-column>
        <el-table-column prop="endtime" label="起止时分秒" show-overflow-tooltip></el-table-column>
        <el-table-column label="操作" fixed="right" align="center">
          <template slot-scope="scope">
            <el-button size="mini" @click="handleDelete(scope.row.id)" v-if="menuArr.includes('班次查询删除按钮')">
              <!-- <i class="iconfont icon-tubiao_liebiaoshanchu" style="color:#DA2821"></i> 删除 -->
              <span style='color:#F75E5E'><i class='iconfont icon-1-08'></i><span style='padding-left:5px;'>删除</span></span>
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </article>
    <footer class="page">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryAll.startpage"
        :page-sizes="[10,  15, 20,25,30]"
        :page-size="queryAll.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalNum"
      ></el-pagination>
    </footer>
    <div class="drawer_box">
      <el-drawer
        :before-close="handleClose"
        title="新增班次"
        :visible.sync="drawerAdd"
        direction="rtl"
        size="50%"
      >
        <div class="searchContent">
            <el-tooltip class="item" effect="dark" content="新增" placement="top">
                <el-button class="search_btn" icon="iconfont icon-tianjia" size="mini" @click="addHandleClick()"></el-button>
            </el-tooltip>
            <el-tooltip class="item" effect="dark" content="编辑" placement="top">
                <el-button class="search_btn"  :disabled="detailRow == '' ? true : false" icon="iconfont icon-bianji" size="mini" @click="editHandleClick()"></el-button>
            </el-tooltip>
        </div>
        <BaseTable :data="newTable" :tableHeight="tableHeight" @details="detailHandleClick" :columns="columns" :pagination="false" ></BaseTable>
        <div class="drawer__footer">
          <el-button size="small" type="primary" @click="addUpdate()" :loading="loading">保存</el-button>
        </div>
      </el-drawer>
      <!-- 详情弹窗 -->
      <el-drawer :visible.sync="isShow" size="35%" class="fontSize24" :destroy-on-close="true" :with-header="false">
        <div class="drawerContent" v-if="isShow">
            <detailPage ref="detailPage" :submitIndexHandleClick="submitIndexHandleClick" :tableClassData="tableClassData" :ruleForm="ruleForm"></detailPage>
        </div>
      </el-drawer>
    </div>
  </div>
</template>

<script>
import Utils from '@/libs/Utils.js'
import headerSearch from '../component/headerSearch.vue'
import detailPage from './subPage/detailPage.vue'
import BaseTable from '@/components/BaseTable' // 表格
import publicapi from '@/api/public/index'
export default {
  name: 'classList',
  data() {
    return {
      oldVal: {},
      menuFlag: false,
      menuArr: [],
      // 搜索框显示对象
      selectObject: [
        //   {
        //     name:"请选择",
        //     type:"select",
        //     modelName:"areaCode",
        //     selectData:this.selectCompany
        //   }
      ],
      queryAll: {
        startpage: 1,
        pagesize: 10,
        areaCode: window.sessionStorage.getItem('deptCode')
      },
      tableClassData: [],
      loading: false,
      totalNum: 0,
      tableData: [],
      selectCompany: [],
      drawerAdd: false,
      newTable: [],
      isShow: false, // 是否显示弹层
      ruleForm: {
        scheduleType: '',
        scheduleName: '',
        startdayName: '',
        startday: '',
        starttime: '',
        enddayName: '',
        endday: '',
        endtime: '',
        addorupdate: '1'
      },
      detailRow: '',
      columns: [
        {
          prop: 'scheduleName',
          label: '班次'
        },
        {
          prop: 'startdayName',
          label: '起始时间'
        },
        {
          prop: 'starttime',
          label: '起始时分秒'
        },
        {
          prop: 'enddayName',
          label: '起止时间'
        },
        {
          prop: 'endtime',
          label: '起止时分秒'
        }
      ]
    }
  },
  components: {
    headerSearch,
    detailPage,
    BaseTable
  },
  async activated() {
    var menuArr = []
    var menuId = ''
    if (localStorage.getItem('menuArr')) {
      menuArr = JSON.parse(localStorage.getItem('menuArr'))
    }
    menuArr.map(item => {
      item.children.map(v => {
        if (window.location.href.includes(v.url)) {
          menuId = v.id
        }
      })
    })
    console.log(menuId)

    if (menuId) {
      this.menuArr = []
      await publicapi.getPermissionsBtn(menuId)
        .then(res => {
          res.data.data.map(item => {
            this.menuArr.push(item.RESOURCENAME)
          })

          if (!this.menuArr.includes('班次插入按钮')) {
            this.menuFlag = false
          } else {
            this.menuFlag = true
          }
        }).catch((error) => {})
    }
    if (this.$store.state.app.searchResouce == 'menu') {
      this.queryAll = {
        startpage: 1,
        pagesize: 10,
        areaCode: window.sessionStorage.getItem('deptCode')
      }
      this.getClsaaSelect()
      this.getCompanyList()
      this.getDataList()
    }
  },
  computed: {
    tableHeight: function() {
      return this.$store.state.tableHeight
    }
  },
  methods: {
    /**
     * @Author: gonghairun
     * @description: 新增班次
     * @param {*}
     * @return {*}
     */
    addHandleClick() {
      this.ruleForm = {
        scheduleType: '',
        scheduleName: '',
        startdayName: '',
        startday: '',
        starttime: '',
        enddayName: '',
        endday: '',
        endtime: '',
        addorupdate: ''
        // areaCode: window.sessionStorage.getItem('deptCode')
      }
      this.isShow = true
    },
    /**
     * @Author: gonghairun
     * @description: 行点击
     * @param {*} row
     * @return {*}
     */
    detailHandleClick(row) {
      this.detailRow = row
    },
    /**
     * @Author: gonghairun
     * @description: 编辑
     * @param {*}
     * @return {*}
     */
    editHandleClick() {
      this.ruleForm = this.detailRow
      this.ruleForm.addorupdate = '1'
      this.isShow = true
    },
    /**
     * @Author: gonghairun
     * @description: 保存
     * @param {*}
     * @return {*}
     */
    submitIndexHandleClick(data) {
      const scheduleTypeList = []
      this.newTable.map((item) => {
        scheduleTypeList.push(item.scheduleType)
      })
      if (!scheduleTypeList.includes(data.scheduleType)) {
        this.newTable.push(data)
        this.isShow = false
      } else if (data.addorupdate == '1') {
        this.isShow = false
      } else {
        this.$message.error('不可以添加重复班次')
      }
    },
    // 获取班次列表
    async getClsaaSelect() {
      const res = await this.$http.get(
        `/wfpms-master-service/api/external/publics/listalldict?dicttype=SCHEDULE`
      )
      this.tableClassData = res.data.data.SCHEDULE
    },
    // 跟换字段组件新的值
    openTableData() {
      const newTable = []
      // if (this.tableClassData) {
      //   for (var i in this['tableClassData']) {
      //     newTable.push({
      //       scheduleType: this.tableClassData[i].dictValue,
      //       scheduleName: this.tableClassData[i].dictLabel,
      //       areaCode: window.sessionStorage.getItem('deptCode')
      //     })
      //   }
      // }
      this.newTable = []
      this.oldVal = JSON.parse(JSON.stringify(this.newTable))
    },

    // 获取select所属公司
    async getCompanyList() {
      const res = await this.$http.get(
        `/wfpms-master-service/api/external/public/listsecondcomp`
      )
      this.selectCompany = res.data.data
      var selectCompanyTemp = [];
      this.selectCompany.map(item => {
        var obj = {};
        obj.dictLabel = item.companyName;
        obj.dictValue = item.companyCode;
        selectCompanyTemp.push(obj)
      })
      this.selectObject[0].selectData = selectCompanyTemp;
    },
    // 搜索查询
    searckClick(searchData) {
      this.queryAll.startpage = 1
      this.queryAll = Object.assign(this.queryAll, searchData);
      this.getDataList()
    },
    // 点击新增按钮
    addClass() {
      this.drawerAdd = true
      // this.flagHint = false
      this.openTableData()
    },
    // 获取列表数据
    async getDataList() {
      const res = await this.$http.get(
        `/wfpms-master-service/api/external/schedule/listschedule`,
        { params: this.queryAll }
      )
      this.tableData = res.data.data.pages
      this.queryAll.pagesize = res.data.data.pageSize
      this.queryAll.startpage = res.data.data.pageNum
      this.totalNum = res.data.data.totalNum
    },
    // 新增保存
    async addUpdate() {
      const data = { config: [] }
      data.config = this.newTable
      this.loading = true
      const res = await this.$http.post(
        `/wfpms-master-service/api/external/schedule/insertschedule`,
        data
      ).catch(err => { this.loading = false })
      this.$message.success(res.data.msg)
      this.loading = false
      this.drawerAdd = false
      this.getDataList()
    },
    handleSizeChange(val) {
      this.queryAll.pagesize = val
      this.getDataList()
    },
    handleCurrentChange(val) {
      this.queryAll.startpage = val
      this.this.getDataList()
    },
    handleClose(done) {
      if (!Utils.compareData(this.oldVal, this.newTable)) {
        this.$confirm('修改的数据未保存，是否关闭？')
          .then(_ => {
            done()
          })
          .catch(_ => { })
      } else {
        done()
      }
    },
    async deleteByCode(id) {
      const res = await this.$http.delete(
        `/wfpms-master-service/api/external/schedule/deleteschedule?id=${id}`
      )
      this.$message.success(res.data.msg)
      this.getDataList()
    },
    // 根据选择框整体删除
    async handleDelete(id) {
      const confirmRes = await this.$confirm(
        '此操作将永久删除该数据, 是否继续?',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).catch(err => {})
      if (confirmRes !== 'confirm') {
        return this.$message.info('已经取消删除')
      }

      this.deleteByCode(id)
    }
  }
}
</script>

<style lang="less" scoped>
.box {
  background: #ffffff;
  border: 1px solid #e1e4eb;
  border-radius: 4px 4px 0 0;
  border-top: none;
}
//删除按钮satrt
/deep/ .el-table .el-button:focus,
.el-table .el-button:hover {
  background-color: #fff;
  border: 1px solid #e1e4eb;
}
/deep/ .el-table .el-button--mini {
  color: #1684f6;
  border-color: transparent;
  background: transparent;
}
// 删除按钮end

// table表头start
/deep/ .el-table th > .cell {
  font-family: PingFangSC-Semibold;
  font-size: 14px;
  color: #606266;
  overflow: hidden;
  // text-overflow: ellipsis;
  white-space: nowrap;
}
// /deep/ .el-table th {
//   border-top: 1px solid #ebeef5;
//   border-left: 1px solid #ebeef5;
// }
 /deep/ .el-table--border td{
    border-right: none;
  }
// table表头end
// 分页
.page {
  background: #ffffff;
  border-radius: 0 0 4px 4px;
  padding: 10px 20px;
  text-align: right;
  box-sizing: border-box;
}
.searchContent{
  height:40px;
  width:100%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 10px;
  /deep/.el-button{
    padding:5px 7px;
  }
}
//抽屉
.drawer_box {
  .el-drawer {
    .el-form {
      padding: 20px;
      box-sizing: border-box;
      .el-select {
        width: 100%;
      }
    }
  }
  /deep/ .el-drawer__header {
    padding: 8px 20px;
    box-sizing: border-box;
    border-bottom: 1px solid gainsboro;
    margin-bottom: 0 !important;
  }
  .drawer__footer {
    text-align: right;
    padding-right: 20px;
    border-top: 1px solid #c8cfde;
    background-color: #f5f7fa;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    line-height: 50px;
  }
  .box {
  background: #ffffff;
  border: 1px solid #e1e4eb;
  border-radius: 4px 4px 0 0;
  border-top: none;
}
}
</style>>
